<%--
  @desc: 应用查看或编辑页面
  @author: chenw
  @create: 2014-4-29 下午 15:32
--%>
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<style type="text/css">
    .pageContent label {
        width: 100px;
    }
    .pageFormContent p {
        width: 430px;
    }
    .pageContent .alt {
        color: #666;
        padding-right: 5px;
    }
    #file_icon_edit, #file_plugin_edit {
        height: 20px;
        width: 220px;
        background-color: #eee;
        line-height: 20px;
        float: left;
        margin-top: 20px;
    }
    .uploadify-button {
        height: 20px;
        line-height: 20px;
        width: 80px;
        border: none;
    }
    .uploadify-button-text {
        line-height: 20px;
    }
    .uploadify-queue {
        float: left;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        margin: 0;
        margin-top: 20px;
    }
    .uploadify-queue-item {
        margin: 0;
        height: 20px;
        padding: 0;
        margin-left: 10px;
        width: 400px;
    }
    .uploadify-queue-item .cancel {
        padding-top: 1px;
    }
    .uploadify-queue-item .cancel a {
        float: right;
        height: 16px;
        font-size: 11px;
        margin-left: 5px;
        margin-right: 5px;
        line-height: 16px;
        background-image: none;
        width: 30px;
        text-indent: 5px;
        cursor: pointer;
        text-decoration: none;
    }
    .uploadify-queue-item .fileName, .uploadify-queue-item .data {
        font-size: 11px;
        color: gray;
    }
    .uploadify-queue-item .uploadify-progress {
        margin: 0;
        margin-top: 3px;
    }
    #icon_show {
        display: inline-block;
        line-height: 20px;
        text-indent: 10px;
        color: gray;
        width: 60px;
        height: 60px;
        margin-left: 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }
</style>
<div class="pageContent" style="padding-top: 1px;" title="应用编辑">
    <form method="post" action="<c:url value='/sys/app/edit'/>" class="pageForm required-validate"
            onsubmit="return validateCallback(this, appEditCallback);" enctype="multipart/form-data">
        <div class="pageFormContent" layoutH="56">
            <p>
                <label>应用名称：</label> <input name="title" type="text" size="30" value="${app.title}"/>
            </p>

            <p>
                <label>开发公司：</label> <input name="vendor" class="required" type="text" size="30" value="${app.vendor}" alt="请输入公司名称"/>
            </p>

            <p>
                <label>联系电话：</label> <input type="text" value="${app.contactTel}" name="contactTel" class="digits" size="30">
            </p>

            <p>
                <label>联 系 人：</label> <input name="contact" value="${app.contact}" type="text" size="30" alt="请输入联系人" class="textInput"/>
            </p>

            <p>
                <label>发布状态：</label> <select name="status" class="required combox">
                <option value="">请选择</option>
                <c:forEach var="st" items="${status}">
                    <option value="${st.key}" ${app.status eq st.key ? 'selected':''}>${st.val}</option>
                </c:forEach> </select>
            </p>

            <p>
                <label>上架时间：</label>
                <input type="text" name="regTime" class="date" dateFmt="yyyy-MM-dd HH:mm:ss" size="27"
                        value="<fmt:formatDate value="${app.regTime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
                <a class="inputDateButton" href="javascript:;">选择</a>
            </p>

            <p>
                <label>版本名称：</label>
                <input name="versionName" value="${app.versionName}" type="text" size="30" alt="请输版本名称" class="textInput"/>
            </p>

            <p>
                <label>版本号：</label>
                <input name="versionCode" value="${app.versionCode}" type="text" size="30" alt="请输入版本号" class="textInput"/>
            </p>

            <p>
                <label>插件类型：</label>
                <select name="appType" class="required combox">
                    <option value="1">HTML</option>
                    <option value="2">原生</option>
                </select>
            </p>
            <p style="width: 100%;height:60px;">
                <label style="margin-top:20px;">应用图标：</label>
                <input id="file_icon_edit" type="file"/> <img id="icon_show" src="${app.icon}"/>
            </p>

            <p style="width: 100%;height:60px;">
                <label style="margin-top:20px;">安装文件：</label>
                <input id="file_plugin_edit" type="file"/>
            </p>

            <p style="width: 100%;">
                <label>应用描述：</label> <textarea cols="83" rows="5" name="desc" style="width:608px;">${app.desc}</textarea>
            </p>
            <input type="hidden" name="id" value="${app.id}"/>
            <input type="hidden" id="iconId" name="icon" value="${iconId}"/>
            <input type="hidden" id="pluginId" name="plugin" value="${pluginId}">
        </div>
        <div class="formBar">
            <ul>
                <li>
                    <div class="buttonActive">
                        <div class="buttonContent">
                            <button type="submit">保存</button>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="button">
                        <div class="buttonContent">
                            <button type="button" class="close">取消</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </form>
</div>
<script type="text/javascript">
    $(function () {
        $('#file_icon_add').uploadify({
            swf: '<c:url value="/resource/dwz/uploadify/scripts/uploadify.swf"/>',
            uploader: '<c:url value="/sys/app/icon/upload"/>',
            auto: true,
            fileObjName: 'appIcon',
            fileSizeLimit: '50KB',
            fileTypeDesc: 'Icon File',
            fileTypeExt: '*.png',
            buttonText: '更新图标',
            removeCompleted: false,
            formData: {"iconId": "${iconId}"},
            height: 20,
            width: 80,
            multi: false,
            onUploadStart: function (file) {
                console.log("start" + file);
            },
            onUploadSuccess: function (file, data, response) {
                if (data && response) {
//                    var respObj = JSON.parse(data).data;
//
                }
            },
            onUploadProgress: function (file, fileBytesLoaded, fileTotalBytes) {
//                console.log("已上传" + fileBytesLoaded / fileTotalBytes * 100);
            }
        });

        $('#file_plugin_edit').uploadify({
            swf: '<c:url value="/resource/dwz/uploadify/scripts/uploadify.swf"/>',
            uploader: '<c:url value="/sys/app/plugin/upload"/>',
            auto: true,
            fileObjName: 'FileData',
            fileSizeLimit: '50M',
            fileTypeDesc: 'zip Files',
            buttonText: '安装文件',
            fileTypeExts: '*.zip',
            removeCompleted: false,
            height: 20,
            width: 80,
            multi: false,
            onUploadSuccess: function (file, data, response) {
                if (data) {
                    var obj = jQuery.parseJSON(data).data[0];
                    $("#plugin").val(obj.fileId);
                    //部署真实环境改成服务器IP
//                    $("#plugin_url").val("http://221.224.13.5:8191/econsole/download/plugins/" + obj.fileId + ".zip");
//                    $("#file_plugin object").hide();
//                    $("#file_plugin-queue .uploadify-queue-item:last .cancel").empty().append("<a id=\"del_" + obj.fileId + "\" onclick=\"removeIcon('" + obj.fileId + "');\">删除</a>");
                }
            }
        });
    });
    function removeIcon(icon_id) {
        $.post("<c:url value='/sys/app/icon/del/'/>" + icon_id, function (resp, st, xhr) {
            if (resp) {
                var res = jQuery.parseJSON(resp);
                if (res.statusCode != 200) {//删除成功
                    alertMsg.info(res.message);
                    $("#file_icon object").show();
                } else {
                    alertMsg.info(res.msg);
                }
                $("#del_" + icon_id).remove();
            }
        });
    }
    function appEditCallback(resp) {
        if (resp && resp.succ) {
            alertMsg.info("更新成功！");
            navTab.closeCurrentTab();
            navTab.reloadFlag('page_app_list')
        } else {
            alertMsg.info(resp.msg + "!");
        }
    }
</script>
